<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">玩转乐园</el-breadcrumb-item>
      <el-breadcrumb-item>夜场攻略</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 30px; padding: 0 250px">
      <div>
        <el-divider></el-divider>
        <h2 style="color: #f07a2e; margin-bottom: 30px; text-align: center">
          12大经典刺激游戏体验，狂欢不停歇
        </h2>
        <div style="border: 2px solid #f0f0f0; padding: 10px 20px 0">
          <TopicSwiper :swiperOptions="nightSwiper">
            <TopicSwiperItem v-for="(item, index) in classicList" :key="index">
              <el-radio v-model="radio_1" :label="index">
                <div
                  class="swiper-item-1"
                  :class="radio_1 == index ? 'orange' : 'blue'"
                >
                  <img :src="item.imgUrl" width="167" height="121" />
                  <p>{{ item.h2 }}</p>
                </div>
              </el-radio>
            </TopicSwiperItem>
          </TopicSwiper>
        </div>
        <div class="details">
          <img :src="box_1.imgUrl" alt="" />
          <div>
            <h2>{{ box_1.h2 }}</h2>
            <p>{{ box_1.p }}</p>
          </div>
        </div>
      </div>
      <div>
        <el-divider></el-divider>
        <h2 style="color: #f07a2e; margin-bottom: 30px; text-align: center">
          6大全新升级玩乐设备，嗨翻不夜天
        </h2>
        <div style="border: 2px solid #f0f0f0; padding: 10px 20px 0">
          <TopicSwiper :swiperOptions="nightSwiper">
            <TopicSwiperItem v-for="(item, index) in upgradeList" :key="index">
              <el-radio v-model="radio_2" :label="index">
                <div
                  class="swiper-item-1"
                  :class="radio_2 == index ? 'orange' : 'blue'"
                >
                  <img :src="item.imgUrl" width="167" height="121" />
                  <p>{{ item.h2 }}</p>
                </div>
              </el-radio>
            </TopicSwiperItem>
          </TopicSwiper>
        </div>
        <div class="details">
          <img :src="box_2.imgUrl" alt="" />
          <div>
            <div class="title">
              <h2>{{ box_2.h2 }}</h2>
              <span>{{ box_2.span }}</span>
            </div>
            <p>{{ box_2.p }}</p>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <h2 style="color: #f07a2e; margin-bottom: 30px; text-align: center">
        精彩不言晚，好玩才过瘾
      </h2>
      <div class="last-box">
        <strong
          >除此之外，还有魂断血域、霹雳战车、4D影院、魔法大草帽、丛林迷旋、天地双雄、飞越长江7大游乐设施，</strong
        >让你玩到过瘾。还在等什么，赶快加入多罗碧加乐园游玩大军，肆意玩耍吧！
        <p>
          *以上项目均根据当天游客入园情况决定是否开放，详情参见园区现场告示，武汉多罗碧加乐园拥有最终解释权。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import TopicSwiper from "@/components/TopicSwiper.vue";
import TopicSwiperItem from "@/components/TopicSwiperItem.vue";

export default {
  components: {
    TopicSwiper,
    TopicSwiperItem,
  },
  watch: {
    radio_1() {
      this.box_1 = this.classicList[this.radio_1];
    },
    radio_2() {
      this.box_2 = this.upgradeList[this.radio_2];
    },
  },
  data() {
    return {
      radio_1: "0",
      radio_2: "0",
      box_1: {
        imgUrl: require("@/assets/images/NightIntroduction-1-1.png"),
        h2: "皇家转马",
        p: "欧式双层皇家旋马精致高贵，在欢快清扬的音乐声中，无数梦幻般的灯光投在脸上,登上五彩的骏马,在童话世界里驰骋!",
      },
      box_2: {
        imgUrl: require("@/assets/images/NightIntroduction-2-1.png"),
        h2: "冲浪勇士",
        span: "站立式“W”型轨道撞浪体验",
        p: "在“W”型轨道上360°旋转运行，海风浪花迎面扑来。不去海边，也能一同感受冲浪的刺激与欢畅！",
      },
      nightSwiper: {
        slidesPerView: 4,
      },
      classicList: [
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-1.png"),
          h2: "皇家转马",
          p: "欧式双层皇家旋马精致高贵，在欢快清扬的音乐声中，无数梦幻般的灯光投在脸上,登上五彩的骏马,在童话世界里驰骋!",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-2.png"),
          h2: "血色破晓",
          p: "阴森、恐怖又奇特的空间内隐藏着千年古尸、狼面人、双角饿狼和各种鬼魂……无论你害怕与否,都能在惊声尖叫中感受挑战的快乐！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-3.png"),
          h2: "Disko",
          p: "一个大圆盘顺着弧形的轨道摇摆起来,带领人们一起跳起了经典又欢快的DISKO！圆盘随着音乐旋转并来回滑荡,大家载歌载舞,好不开心！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-4.png"),
          h2: "飓风飞椅",
          p: "飓风来临,椅子也随着飓风旋转起来了,坐上飞椅感受征服飓风的快感！飓风咆啸的声音都被欢声笑语取代！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-5.png"),
          h2: "能量风暴",
          p: "外型酷似八爪鱼的“能量风暴”,能在急速的旋转带动能量的爆发,难以置信的速度和双重的旋转将为您带来一段无与伦比的记忆！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-6.png"),
          h2: "神圣时刻",
          p: "跳动不停，尖叫不止，在地面和高空间上弹下跳。每一次甜蜜的蹦跶都能听到风从耳边呼啸而过。",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-7.png"),
          h2: "梦幻棒棒糖",
          p: "梦幻棒棒糖旋转飞舞营造浪漫气氛，波动弹跳，不断起伏，最后飞向天空饱览甜品王国风光。",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-8.png"),
          h2: "疯狂下午茶",
          p: "一个个的大杯子组合在一起,魔法让它们滴溜溜地转了起来,坐在杯子里,你也能跳出浪漫的圆舞曲！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-9.png"),
          h2: "奶酪泡泡馆",
          p: "泡泡子弹发射，使劲转动，向他们扫射！瞬间香甜爆炸，快乐简单纯粹，这就是童年的味道。",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-10.png"),
          h2: "魔术自行车",
          p: "魔术自行车可不一般,骑着它,能让你飞腾起来！俯视卡通工厂在脚下旋转,是不是别有一番风味呢？",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-11.png"),
          h2: "浪花跳跳",
          p: "伴随音乐，自主操控座椅旋转，像浪花一样此起彼伏地舞动，有节奏地上升和下降。",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-1-12.png"),
          h2: "丛林迷旋",
          p: "和家人朋友围坐在这个神奇的转盘上，伴随着富有节奏的音乐，身体随着圆盘运动。如大海波涛颠簸，又如太空飞碟起伏，时快时慢，变化无穷。我们宛如一个个跳动的音符，共同演奏出一段欢乐的乐章……",
        },
      ],
      upgradeList: [
        {
          imgUrl: require("@/assets/images/NightIntroduction-2-1.png"),
          h2: "冲浪勇士",
          span: "站立式“W”型轨道撞浪体验",
          p: "在“W”型轨道上360°旋转运行，海风浪花迎面扑来。不去海边，也能一同感受冲浪的刺激与欢畅！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-2-2.png"),
          h2: "奇趣飞鱼",
          span: "无敌空中模拟激战飞车",
          p: "坐在小飞鱼背上旋转、飞跃，在欢乐海洋的上空飞翔，在变速转动、高低起伏中体验梦幻翱翔的乐趣。",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-2-3.png"),
          h2: "极速穿越",
          span: "华中首个5D过山车",
          p: "极速穿越奇幻冒险，你就是主角！急转摆动，颠簸跌宕，感受穿梭坠落的快感，赶快来挑战！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-2-4.png"),
          h2: "海马骑士",
          span: "超奇妙微型失重跳楼机",
          p: "伴随着优美的音乐坐上可爱海马，他们上下跳动，忽高忽低，彷佛和海马一起翱翔大海，带来些许失重和眩晕感。",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-2-5.png"),
          h2: "水上飞机",
          span: "华中首创双环式贴水飞行器",
          p: "水上飞机踏浪而来，时而在天上飞舞，时而从水面掠过，溅起欢快的水花，在不断地俯冲、旋转中体验飞行的畅快！",
        },
        {
          imgUrl: require("@/assets/images/NightIntroduction-2-6.png"),
          h2: "音乐飞船",
          span: "超刺激旋转式空中飞船",
          p: "伴随着音乐，座舱缓缓旋转，紧接着一波接一波的翻滚，瞬间提升、跌落、停止、翻滚，和爸爸妈妈一起玩转心跳！",
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

::v-deep .el-radio__input {
  display: none;
}

::v-deep .swiper-slide {
  width: 193px !important;
}

.orange {
  border: 3px solid #f07a2e;
}

.blue {
  border: 3px solid #019be4;
}

.swiper-item-1 {
  position: relative;
  color: #fff;

  img {
    vertical-align: top;
  }

  p {
    height: 30px;
    line-height: 30px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0;
  }
}

.details {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 100px !important;

  img {
    border: 3px solid #f07a2e;
    margin-right: 30px;
  }

  .title {
    display: flex;
    align-items: flex-end;

    span {
      font-size: 14px;
      margin-left: 20px;
      position: relative;
      bottom: 2px;
    }
  }

  > div {
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    padding: 30px 20px;
    width: 350px;

    h2 {
      color: #ff9642;
    }

    span {
      color: #ff9642;
    }

    p {
      margin-top: 10px;
      line-height: 24px;
      color: #545c64;
    }
  }
}

.last-box {
  color: #fff;
  background-color: #fea8b8;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  line-height: 24px;
}
</style>
